<template>
  <div>
      <div id="mydom"></div>
  </div>
</template>
<script setup lang="ts">
import {ref,onMounted} from 'vue'
   // ts的类和 es6的类的区别
  // ts的类 的属性 写在constructor 外部声明
  // ts里面的函数 形参要写类型  返回值写类型
  // ts新增了三个修饰符 来修饰属性和方法
      // public 公共的
    //  private 私有的
    //  protected 受保护的
   class Car{
    //  ts的属性 写在全局
        public name:string;
        private age:number
        protected color:string
      constructor(name:string,age:number,color:string){
          this.name=name;
          this.age=age;
          this.color=color;
      }
     public run(km:number){
        console.log("跑了",km,"公里")
        // private私有的方法和属性 在类的内部使用
        this.jia()
        console.log(this.name)
        this.play();
      }
      private jia():void{
          console.log("加油")
         
      }
      protected play(){
        console.log("改装车")
      }
      static say(){
        console.log("静态方法")
      }
   }
  //  静态方法 无需实例化对象
   Car.say()
   let benchi=new Car("奔驰迈巴赫s680",12,"红色");
   console.log(benchi,"------------");

  //  公共的方法
   console.log(benchi.name)//public公共属性
   benchi.run(1000)
// 私有的 ------private 的属性和方法 一般只在类的内部使用
  //  console.log(benchi.age)
  //   benchi.jia();

  // protected 受保护的的属性和方法 只能在类的内部和其子类内部访问
  // console.log(benchi.color)
  // benchi.play()


  // 继承 
  class Deguo extends Car{
       cname:string
      constructor(cname:string){
              super("宝马",23,"红色");
            this.cname=cname;
      } 
    say(){

      this.play()  //访问了父类的 受保护的方法 protected
    }
  }
  let de=new Deguo("德国")
    de.say();

    // ts的 泛型  不用固定类型 使用类型的变量
    function say(x:string,y:number):string{
      console.log(x)
      console.log(y)
      return "你好"
    }
    say("sdf",123);
    // 泛型函数 <> 泛型变量常用T,U,V
    function run<T,U>(name:T,age:U):U{
        console.log(name)
        return age
    }
    // 泛型实参的传递 <> 
    run<string,number>("王宝强",40);
    
    run<boolean,Array<number>>(true,[1,2,3])

    // 接口泛型
    interface IHouse<T,U,V>{
        name:T,
        size:U,
        price:V,
        zhu(num:V):T
    }
    let myhouse:IHouse<string,number,number>={
          name:"汤臣一品",
          size:1800,
          price:123,
          zhu(num:number){
            console.log(num)
              return "住的人数"
          }
    }
    console.log(myhouse)

    // 泛型在类的使用
    class  Person<T,U,V>{
        name:T;
        age:U;
        constructor(name:T,age:U){
            this.name=name;
            this.age=age;
        }
        run(km:V):V{
          return km
        }
    }
 let zhangsan=new Person<string,number,boolean>("张三",18)
    console.log(zhangsan)
    zhangsan.run(true)

let lisi=new Person<object,boolean,number>({name:1},true)
console.log(lisi)

// 类型断言 程序员 自己推断的类型  来标注给ts检测系统
  let someValue: any = 'this is a string';
  // 自己用类型断言 告诉检测系统，someValue是一个字符串类型
  // 写法1    <类型>数据 ---(<string>someValue)
  //  let strLen:number=(<string>someValue).length;

  // 写法2    数据 as 类型  (someValue as string)
 let strLen:number=(someValue as string).length;

 console.log(strLen)
    onMounted(()=>{
      // 类型断言  确定 获取的元素是div元素类型
      let mydom=document.getElementById("mydom") as HTMLDivElement
      console.log(mydom)
    })

// 类型推论 ts自带类型推论系统  首次赋值的数据类型 就是
// 变量以后的数据类型
let x=888;
// x="sfsdf"
console.log(x)



</script>